<template>
    <el-form>
        <el-form-item label="SPU名称">
            <el-input placeholder="请输入SPU名称" v-model="spuParams.spuName"></el-input>
        </el-form-item>
        <el-form-item label="SPU品牌">
            <el-select placeholder="请选择" v-model="spuParams.tmId">
                <el-option :label="trademark.tmName" :value="trademark.id" v-for="(trademark, index) in allTrademarkArr"
                    :key="trademark.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="SPU描述">
            <el-input type="textarea" v-model="spuParams.description"></el-input>
        </el-form-item>
        <el-form-item label="SPU图片">
            <el-upload action="/api/admin/product/fileUpload" list-type="picture-card" :file-list="imgListArr"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-select label="请选择">
                <el-option label="北京" value="1"></el-option>
            </el-select>
            <el-button type="primary" size="default" :icon="Plus">添加销售属性</el-button>

            <el-table border stripe style="margin: 10px 0px" :data="spuHasSaleAttrArr">
                <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
                <el-table-column label="属性名" width="120" prop="saleAttrName"></el-table-column>
                <el-table-column label="属性值名称列表">
                    <template #="{row,$index}">
                        <el-tag type="success" size="small" effect="dark" closable style="margin:0px 5px"></el-tag>
                        <el-input placeholder="请输入属性值" size="small" style="width:100px; margin:0px 5px" @blur="toLook">
                        </el-input>
                        <el-button type="primary" size="small" :icon="Plus"></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template #="{row,$index}">
                        <el-button type="danger" size="small" :icon="Delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" size="default">保存</el-button>
            <el-button size="default" @click="emit('changeScene',0)">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import { rowContextKey, rowProps, type UploadProps, type UploadUserFile } from "element-plus";
import { reqAllTrademark, reqAllSaleAttr, reqImgList, reqSpuHasSaleAttr } from '@/api/product/spu/spu'
import { ElMessage } from "element-plus";




//存储服务器返回的数据
let allTrademarkArr = ref([]);
let imgListArr = ref([]);
let allSaleAttrArr = ref([]);
let spuHasSaleAttrArr = ref([])

//修改/添加SPU需要传给服务器的数据
let spuParams = ref({})
//存储预览图片地址
const dialogImageUrl = ref('')
//控制对话框显示与隐藏
const dialogVisible = ref(false)

//删除图片的回调
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
};
//预览回调
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!;
    dialogVisible.value = true;
};
//图片上传成功的回调
const handleSuccess = (response, uploadFile, uploadFiles) => {
    //前两个参数:图片上传成功的信息
    //最后的参数:图片上传成功以后，照片墙全部图片数据
    imgListArr.value = uploadFiles
}

//获取数据的方法
const initHasSpuData = async (spu) => {
    //存储数据
    spuParams.value = spu;
    //发请求获取数据
    let ps1 = reqAllTrademark();
    let ps2 = reqImgList(spu.id);
    let ps3 = reqSpuHasSaleAttr(spu.id);
    let ps4 = reqAllSaleAttr();
    let result = await Promise.all([ps1, ps2, ps3, ps4]);
    //存储数据
    allTrademarkArr.value = result[0];
    //存储照片墙数据
    imgListArr.value = result[1].map((item) => {
        return {
            name: item.imgName,
            url: item.imgUrl
        }
    });
    spuHasSaleAttrArr.value = result[2];
    allSaleAttrArr.value = result[3];
    console.log(spuParams)
}

//切换到input
const toEdit = ()=>{

}

//切换到button模式
const toLook = (row) => {
    //非法字符校验
    if (row.inputValue.trim() == '') {
        ElMessage({
            type: 'error',
            message: '属性值不能为空'
        })
        return;
    }
    //获取输入的值判断是否重复
    let repeat = row.spuSaleAttrValueList.find(item => {
        return item.saleAttrValueName === row.inputValue;
    });
    if (repeat) {
        ElMessage({
            type: 'error',
            message: '属性值不能重复'
        });
        //清空表单
        row.inputValue = '';
        //切换按钮
        row.flag = true;
        return;
    }
    //显示button
    row.flag = false;
    //新增属性值
    let newSaleAttrVal = {
        baseSaleAttrId: row.baseSaleAttrId,
        saleAttrValueName:row.inputValue,
    }
    //追加到销售属性值列表中
    row.spuSaleAttrValueList.push(newSaleAttrVal)
    //清空数据
    row.inputValue = ''
}



//取消按钮的回调
let emit = defineEmits(['changeScene'])

//将方法对外暴露(使父组件可以使用)
defineExpose({ initHasSpuData })

</script>

<style scoped>

</style>